<template>
  <div class="trackquery">
    <div id="container" class="map"></div>
  </div>
</template>
<script>
export default {
  name: "cloud_map",
  data() {
    return {
      map: {},
      marker: {},
      zoom: 17,
      markerArr: [],
      lineArr: [],
    };
  },
  created() {},
  mounted() {
    console.log("DOM加载完成");
    this.getmap();
    setTimeout(()=>{
      this.startAnimation()
    },1500)
  },
  methods: {
    getmap() {
      this.lineArr = [
        [116.478935, 39.997761],
        [116.478939, 39.997825],
        [116.478912, 39.998549],
        [116.478912, 39.998549],
        [116.478998, 39.998555],
        [116.478998, 39.998555],
        [116.479282, 39.99856],
        [116.479658, 39.998528],
        [116.480151, 39.998453],
        [116.480784, 39.998302],
        [116.480784, 39.998302],
        [116.481149, 39.998184],
        [116.481573, 39.997997],
        [116.481863, 39.997846],
        [116.482072, 39.997718],
        [116.482362, 39.997718],
        [116.483633, 39.998935],
        [116.48367, 39.998968],
        [116.484648, 39.999861],
        [116.484758, 39.999961],
      ];
      //操作dom渲染地图
      let container = document.querySelector('#container')
      this.map = new AMap.Map(container, {
        resizeEnable: true,
        center: [116.478935, 39.997761],
        zoom: this.zoom,
      });
      //标记车辆
      this.marker = new AMap.Marker({
        position: [116.478935, 39.997761],
        icon: "https://webapi.AMap.com/images/car.png",
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true,
        angle: -90,
        map: this.map,
      });
      var polyline = new AMap.Polyline({
        map: this.map,
        path: this.lineArr,
        showDir: true,
        strokeColor: "#28F", //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 6, //线宽
        strokeStyle: "solid", //线样式
      });
      console.log(polyline);
    },
    startAnimation() {
      console.log("小车移动");
      this.marker.moveAlong(this.lineArr, 200);
    },
    openInfo() {
      console.log("打开标记");
    },
  },
};
</script>

<style scoped>
.map {
  width: 150%;
  height: 400px;
}
</style>
